<template>
  <div class="onsell">
    <van-notify id="custom-selector" />
    <!-- 图片 -->
    <div class="item">
      <div class="findleft">
        <div class="add">
          <img src="../../static/add.png" alt="" />
        </div>
        <div class="leftFont">
          <div>上传照片</div>
          <div>
            只能上传房屋图片，不能含有文字、数字、网址、名片、水印等，所有类别图片总计20张
          </div>
        </div>
      </div>
      <van-icon name="arrow" color='#666' @click="ToUpdateFile"/>
    </div>
    <!-- 小区 -->
    <div class="area">
      <div class="arealeft">
        <p>小区</p>
        <p>请选择小区</p>
      </div>
       <van-icon name="arrow" color='#666' @click="ToArea"/>
    </div>
    <!-- 房产类型 -->
    <div class="area">
      <div class="arealeft">
        <p>房产类型</p>
        <p>{{ houseType }}</p>
      </div>
      <van-icon name="arrow" color='#666' @click="showPopup"/>
    </div>
    <van-popup
      :show="show"
      position="bottom"
      custom-style="height: 200px;"
      @close="onClose"
    >
      <van-picker :columns="columns" default-index="2" @change="onChange" />
    </van-popup>
    <!-- 区域 -->
    <div class="area">
      <div class="arealeft">
        <p>区域</p>
        <p>{{ Area }}</p>
      </div>
      <van-icon name="arrow" color='#666' @click="ToShowArea"/>
    </div>
    <van-popup
      :show="showArea"
      position="bottom"
      custom-style="height: 200px;"
      @close="onCloseArea"
    >
      <van-picker
        :columns="AreaList"
        default-index="2"
        @change="onChangeArea"
      />
    </van-popup>
    <!-- 户型 -->
    <div>
      <div class="area">
        <div class="arealeft">
          <p>户型｜朝向｜装修</p>
          <p>{{ HouseType }}-{{ Towards }}-{{ Decoration }}</p>
        </div>
        <van-icon name="arrow" color='#666'  @click="ToShowHouse"/>
      </div>
      <van-popup
        :show="ShowHouse"
        position="bottom"
        custom-style="height: 200px;"
        @close="onCloseHouse"
      >
        <van-tabs>
          <van-tab title="户型">
            <van-picker
              :columns="HouseTypeList"
              default-index="2"
              @change="onChangeHouse"
            />
          </van-tab>
          <van-tab title="朝向">
            <van-picker
              :columns="TowardsList"
              default-index="2"
              @change="onChangeTowards"
            />
          </van-tab>
          <van-tab title="装修">
            <van-picker
              :columns="DecorationList"
              default-index="2"
              @change="onChangeDecoration"
            />
          </van-tab>
        </van-tabs>
      </van-popup>
    </div>
    <div class="‘floor’">
      <span>所在楼层</span>
      <van-cell-group>
        <van-field
          :model:value="floor"
          placeholder="请输入"
          border="false"
          input-align="center"
          @change="changefloor"
        />
      </van-cell-group>
      <span>层</span>
      <span>共</span>
      <van-cell-group>
        <van-field
          :model:value="floorTotal"
          placeholder="请输入"
          border="false"
          input-align="center"
          @change="changefloorTotal"
        />
      </van-cell-group>
      <span>层</span>
    </div>
    <!-- 面积 -->
    <div class="area">
      <div class="arealeft">
        <p>面积</p>
        <p>{{ squareValue ? squareValue + "平方米" : squareTotal }}</p>
      </div>
      <van-icon name="arrow" color='#666'  @click="ToShowsquare"/>
    </div>
    <van-popup :show="square" @close="onClosesquare">
      <div>
        <van-cell-group>
          <div class="square1">输入面积</div>
          <van-field
            :model:value="squareValue"
            placeholder="请输入"
            border="false"
            input-align="center"
            @change="changesquareTotal"
            custom-style="width:100%;height:80px"
          />
        </van-cell-group>
      </div>
    </van-popup>
    <!-- 售价 -->
    <div class="area">
      <div class="arealeft">
        <p>售价</p>
        <p>{{ PriceValue ? PriceValue + "元" : PriceTotal }}</p>
      </div>
      <van-icon name="arrow" color='#666'  @click="ToShowPrice"/>
    </div>
    <van-popup :show="Price" @close="onClosePrice">
      <div>
        <van-cell-group>
          <div class="square1">How Much ?</div>
          <van-field
            :model:value="PriceValue"
            placeholder="请输入"
            border="false"
            input-align="center"
            @change="changePriceTotal"
            custom-style="width:100%;height:80px"
          />
        </van-cell-group>
      </div>
    </van-popup>
    <!-- 标签 -->
    <div class="tag">
      <p>标签</p>
      <div class="tagTop">
        <span v-for="(item, index) in tagTopList" :key="index">
          {{ item }}
        </span>
      </div>
      <div class="tagBottom">
        <span v-for="(item, index) in tagBottomList" :key="index">
          {{ item }}
        </span>
      </div>
    </div>
    <!-- 标题 -->
    <div class="area">
      <div class="arealeft">
        <p>标题</p>
        <van-field
          :model:value="TitleValue"
          placeholder="请输入"
          border="false"
          input-align="left"
          @change="changeTitleValue"
        />
      </div>
      <van-icon name="arrow" color='#666' />
    </div>
    <!-- 描述 -->
    <div class="area">
      <div class="arealeft">
        <p>描述</p>
        <van-field
          :model:value="Des"
          placeholder="请输入"
          border="false"
          input-align="left"
          @change="changeDes"
        />
      </div>
      <van-icon name="arrow" color='#666' />

    </div>
    <!-- 联系人 -->
    <div class="area">
      <div class="arealeft">
        <p>联系人</p>
        <van-field
          :model:value="TelPerson"
          placeholder="请输入"
          border="false"
          input-align="left"
          @change="changeTelPerson"
        />
      </div>
      <van-icon name="arrow" color='#666' />

    </div>
    <!-- 有效时间 -->
    <div class="onTime">
      <p>有效时间</p>
      <div>30天</div>
    </div>
    <!-- 支付 -->
    <div class="pay">
      <van-checkbox
        shape="square"
        :value="checked"
        checked-color="#07c160"
        @change="changeChecked"
      >
        <span>已阅读并接受《宏烨找房网房房源信息发布规则》</span>
      </van-checkbox>
      <van-goods-action>
        <van-goods-action-button text="发布并支付" @click="pay" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
// import Notify from "../../../wxcomponents/vant/notify/notify";
import {payMoney} from '../../services/index'
export default {
  data() {
    return {
      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      show: false,
      showArea: false,
      ShowHouse: false,
      square: false,
      Price: false,
      houseType: "请选择",
      Area: "请选择",
      AreaList: ["宁波", "温州"],
      Decoration: "请选择",
      HouseType: "请选择",
      Towards: "请选择",
      HouseTypeList: [
        {
          values: ["一室", "两室", "三室"],
          className: "column1",
          defaultIndex: 1,
        },
        {
          values: ["一厅", "两厅", "三厅"],
          className: "column2",
          defaultIndex: 2,
        },
        {
          values: ["一卫", "两卫", "三卫"],
          className: "column2",
        },
      ],
      TowardsList: ["东", "南", "西", "北"],
      DecorationList: ["毛坯房", "精装修"],
      floor: "",
      floorTotal: "",
      squareValue: "",
      squareTotal: "请选择",
      PriceValue: "",
      PriceTotal: "请选择",
      TitleValue: "",
      Des: "",
      TelPerson: "",
      tagTopList: ["新上房源", "小户型", "有电梯", "优质教育"],
      tagBottomList: [
        "低总价",
        "满两年",
        "满五年",
        "随时看房",
        "满五唯一",
        "低首付",
        "两室朝阳",
        "精装",
      ],
      checked: true,
    };
  },
  created() {
    Notify({
      message: "发布本条信息将收费10.00元",
      duration: 0,
      background: "#fdd",
      color: "#f00",
      selector: "#custom-selector",
    });
  },
  methods: {
     async pay() {
      let result = await payMoney({ total_fee: 1000 });
      const { timeStamp, nonceStr } = result.data;
      //    paySign是关键字
      wx.requestPayment({
        timeStamp,
        nonceStr,
        package: result.data.package,
        signType: "MD5",
        paySign: result.data.paySign,
        success(res) {
          console.log(res,"发起付款成功");
        },
        fail(res) {},
      });
    },
    ToUpdateFile() {
      wx.navigateTo({
        url: "/pages/send/houseDetail/updateImg",
      });
    },
    ToArea() {
      wx.navigateTo({
        url: "/pages/send/houseDetail/selectArea",
      });
    },
    showPopup() {
      this.show = true;
    },
    ToShowHouse() {
      this.ShowHouse = true;
    },
    ToShowsquare() {
      this.square = true;
    },
    ToShowPrice() {
      this.Price = true;
    },
    onClose() {
      this.show = false;
    },
    onCloseArea() {
      this.ShowArea = false;
    },
    onCloseHouse() {
      this.ShowHouse = false;
    },
    onClosesquare() {
      this.square = false;
    },
    onClosePrice() {
      this.Price = false;
    },
    ToShowArea() {
      this.showArea = true;
      console.log(this.ShowArea);
    },

    onChange(event) {
      const { picker, value, index } = event.detail;
      // console.log(value,event)
      this.houseType = value;
      this.show = false;
    },
    onChangeArea(event) {
      const { picker, value, index } = event.detail;
      // console.log(value,event)
      this.Area = value;
      this.showArea = false;
    },
    onChangeHouse(event) {
      const { picker, value, index } = event.detail;
      console.log(value, event);
      this.HouseType = value;
      // this.ShowHouse = false;
    },
    onChangeTowards(event) {
      const { picker, value, index } = event.detail;
      console.log(value, event);
      this.Towards = value;
      // this.ShowHouse = false;
    },
    onChangeDecoration(event) {
      const { picker, value, index } = event.detail;
      console.log(value, event);
      this.Decoration = value;
      // this.ShowHouse = false;
    },
    changefloor(event) {
      this.floor = event.detail;
    },
    changefloorTotal(event) {
      this.floorTotal = event.detail;
    },
    changesquareTotal(event) {
      this.squareValue = event.detail;
    },
    changePriceTotal(event) {
      this.PriceValue = event.detail;
    },
    changeTitleValue(event) {
      this.TitleValue = event.detail;
    },
    changeDes(event) {
      this.Des = event.detail;
    },
    changeTelPerson(event) {
      this.TelPerson = event.detail;
    },
    changeChecked(event) {
      console.log(event.detail);
      this.checked = event.detail;
    },
  },
};
</script>

<style lang="scss" scope>
.onsell {
  color: #999;
  padding: 20rpx;
  .item {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #eee;
    .findleft {
      display: flex;
      .add {
        text-align: center;
        width: 80px;
        height: 80px;
        display: inline-block;
        image {
          width: 80px;
          height: 80px;
        }
      }
      .leftFont {
        padding-left: 20rpx;
        color: #999;
        div {
          &:nth-child(1) {
            font-size: 20px;
          }
        }
      }
    }
  }
  .area {
    color: #999;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #999;
    padding: 15rpx;
    margin: 10px 0;
    
  }
  .floor {
    display: flex;
    justify-content: space-around;
    align-items: center;
    span {
      display: inline-block;
    }
  }
  .square1 {
    width: 100%;
    text-align: center;
    line-height: 40px;
  }
  .tag {
    color: #999;
    .tagTop {
      span {
        display: inline-block;
        padding: 5px 10px;
        // border: 1px solid rgb(221, 13, 13);
        margin: 5px;
      }
    }
    .tagBottom {
      text-align: center;
      span {
        display: inline-block;
        font-size: 12px;
        padding: 5px 10px;
        // border: 1px solid rgb(98, 163, 23);
        margin: 5px;
      }
    }
  }
  .pay {
  margin: 10px 0;
    width: 100%;
    height: 80px;
    .ipt {
      input {
        width: 5px;
        height: 5px;
        border: 1px solid;
      }
      display: flex;
    }
  }
  .onTime {
    p {
      color: #f00;
      font-weight: bold;
      font-size: 12px;
    }
    div {
      width: 90px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      margin: 20rpx;
      border: 1px dotted #f00;
    }
  }
}
</style>